<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            cursor: pointer;
        }

        /*  */
        .box {
            margin: 20px auto;
            width: 80%;
        }

        table {
            border: 4px solid;
            border-bottom: 3px solid;
            width: 100%;
            text-align: center;
        }

        img {
            width: 100px;
            height: 100px;
            border-radius: 5px;
        }

        tbody tr th {
            border: 2px solid;
            border-left: none;
            border-right: none;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="box s">
        <table cellspacing="0">
            <thead>
                <tr>
                    <th colspan="4">
                        <h1>商品列表</h1>
                    </th>
                </tr>
                <tr height="60px">
                    <th colspan="4"><input id="name" type="text" placeholder="输入商品名称查询"
                            style="margin-right: 10px;"><button id="find">搜索</button></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="box go">
        <table cellspacing="0">
            <thead>
                <tr>
                    <th><input class="quan" type="checkbox" disabled></th>
                    <th colspan="5">
                        <h1>购物车</h1>
                    </th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <th colspan="6" style="text-align: right;padding-right: 30px;">
                        总价￥：<span class="zong" style="color: red;font-weight: 900;">0</span><button class="jsn"
                            style="margin-left: 10px;" disabled>结算</button>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- CDN引⼊JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 异步加载
        window.onload = () => {
            data()
            $('#find').on('click', find)
            $('.s tbody').on('click', s)
            $('.go tbody').on('click', gotbody)
            $('.quan').on('click', quan)
            $('.jsn').on('click', Results)
        }
        // 商品数据
        let product = [
            {
                img: 'https://img13.360buyimg.com/jdcms/s480x480_jfs/t1/275025/16/13447/140246/67e9f4d2F74c09b69/33159bdb1201a18d.png.avif',
                name: '儿童玩具车',
                num: '129',
                ass: '.80',
                number: 1,
                falg: false,
                id: 0
            },
            {
                img: 'https://img10.360buyimg.com/jdcms/s480x480_jfs/t1/239038/25/16780/145383/66bc799aFac34842b/4f3321b36fa3ec6a.jpg.avif',
                name: '儿童玩具压土车',
                num: '36',
                ass: '.00',
                number: 1,
                falg: false,
                id: 1
            },
            {
                img: 'https://img20.360buyimg.com/jdcms/s480x480_jfs/t1/103054/37/36026/123924/64c78776Fddfacd4c/3b2cb618f10e8f00.jpg.avif',
                name: '小青柠饮料',
                num: '7',
                ass: '.45',
                number: 1,
                falg: false,
                id: 2
            },
        ]
        // 购物车数据
        let go = []
        // 渲染商品
        function data() {
            $('.s tbody').html('')
            $.each(product, (index, item) => {
                $('.s tbody').append(`
                    <tr>
                        <th><img src="${item.img}"
                                alt=""></th>
                        <th>${item.name}</th>
                        <th>
                            <i style="color: red;font-size: 14px;">¥</i>
                            <span style="color: red;font-size: 23px;">${item.num}</span>
                            <span style="color: red;font-size: 14px;">${item.ass}</span>
                        </th>
                        <th><button data-index = '${index}'>加入购物车</button></th>
                    </tr>
                `)
            })
        }
        // 搜索
        function find() {
            if ($('#name').val() !== '') {
                if (product.some(item => item.name.includes($('#name').val()))) {
                    $('.s tbody').html('')
                    product.filter(item => item.name.includes($('#name').val())).forEach((item, index) => {
                        $('.s tbody').append(`
                            <tr>
                                <th><img src="${item.img}"
                                        alt=""></th>
                                <th>${item.name}</th>
                                <th>
                                    <i style="color: red;font-size: 14px;">¥</i>
                                    <span style="color: red;font-size: 23px;">${item.num}</span>
                                    <span style="color: red;font-size: 14px;">${item.ass}</span>
                                </th>
                                <th><button data-index = '${index}'>加入购物车</button></th>
                            </tr>
                        `)
                    })
                }
                else {
                    $('.s tbody').html('')
                    $('.s tbody').append(`
                        <tr>
                            <th colspan="4">
                                <h1>查找不到该商品！！！</h1>
                            </th>
                        </tr>
                    `)
                }
            } else if ($('#name').val() === '') {
                data()
            }
        }
        // 加入购物车
        function s() {
            if (event.target.nodeName === 'BUTTON') {
                $('.quan').prop('disabled', false)
                id = event.target.dataset.index
                if (go.some(item => item.id === Number(id))) {
                    let str = go.find(item => item.id === Number(id))
                    str.number++
                    gos()
                } else {
                    go.push(product[event.target.dataset.index])
                    let is = go.every(item => item.falg)
                    $('.quan').prop('checked', is)
                    gos()
                }
            }
        }
        // 渲染购物车
        function gos() {
            $('.go tbody').html('')
            $.each(go, (index, item) => {
                $('.go tbody').append(`
                    <tr>
                        <th><input type="checkbox"  data-index = '${item.id}' ${item.falg ? 'checked' : false}></th>
                        <th><img src="${item.img}"
                                alt=""></th>
                        <th>${item.name}</th>
                        <th>
                            <i style="color: red;font-size: 14px;">¥</i>
                            <span style="color: red;font-size: 23px;">${item.num}</span>
                            <span style="color: red;font-size: 14px;">${item.ass}</span>
                        </th>
                         <th>
                            <span data-index = '${item.id}' style='cursor: pointer;border:2px solid gray;border-radius: 5px;'>＋</span>
                            <span>${item.number}</span>
                            <span data-index = '${item.id}' style='cursor: pointer;border:2px solid gray;border-radius: 5px;'>—</span>
                        </th>
                        <th><button data-index = '${item.id}'>删除</button></th>
                    </tr>
                `)
            })
        }
        // 购物车事件委托
        function gotbody() {
            if (event.target.nodeName === 'BUTTON') {
                if (window.confirm('确认删除？')) {
                    let index = go.findIndex(item => item.id === Number(event.target.dataset.index))
                    go.find(item => item.id === Number(event.target.dataset.index)).falg = false
                    go.find(item => item.id === Number(event.target.dataset.index)).number = 1
                    if (go.find(item => item.id === Number(event.target.dataset.index)).falg) {
                        nums()
                    }
                    go.splice(index, 1)
                    if (go == '') {
                        $('.quan').prop('disabled', true)
                        $('.quan').prop('checked', false)
                        $('.jsn').prop('disabled', true)
                    }
                    gos()
                }
            }
            else if (event.target.nodeName === 'SPAN' && event.target.innerHTML === '＋') {
                let arr = go.find(item => item.id === Number(event.target.dataset.index))
                arr.number++
                gos()
                if (go.find(item => item.id === Number(event.target.dataset.index)).falg) {
                    nums()
                }
            }
            else if (event.target.nodeName === 'SPAN' && event.target.innerHTML === '—') {
                let arr = go.find(item => item.id === Number(event.target.dataset.index))
                if (arr.number > 1) {
                    arr.number--
                }
                gos()
                if (go.find(item => item.id === Number(event.target.dataset.index)).falg) {
                    nums()
                }
            }
            else if (event.target.nodeName === 'INPUT') {
                go.find(item => item.id === Number(event.target.dataset.index)).falg = event.target.checked
                let is = go.every(item => item.falg)
                $('.quan').prop('checked', is)
                gos()
                nums()
            }
        }
        // 全选
        function quan() {
            $.each(go, (index, item) => {
                item.falg = this.checked
            })
            gos()
            nums()
        }
        // 总价
        function nums() {
            let zong = go.filter(item => item.falg).reduce((a, b) => a += b.number * (Number(b.num) + Number(b.ass)), 0)
            $('.zong').text(zong.toFixed(2))
            if (go.some(item => item.falg)) {
                $('.jsn').prop('disabled', false)
            } else {
                $('.jsn').prop('disabled', true)
            }
        }
        // 结算
        function Results() {
            let money = go.filter(item => item.falg)
            let cars = []
            $.each(money, (index, item) => {
                cars.push({
                    id:item.id,
                    name:item.name,
                    Price:Number(item.num)+Number(item.ass),
                    num:item.number,
                    img:item.img,
                })
            })
            localStorage.setItem('car', JSON.stringify(cars))
            location.assign('./5.28.购物车订单.html')
        }
    </script>
</body>

</html>